<template>
  <div>
    <el-form :rules="rules" label-width="80px" style="width: 300px">
      <el-form-item label="封面" prop="cover">
        <el-upload
          action="http://localhost:3000/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="商品类型" prop="options">
        <template></template>
        <el-select
          @change="change($event)"
          @click.native="submit"
          v-model="id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.emps_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品品牌" prop="options1">
        <template></template>
        <el-select
          @change="change1($event)"
          @click.native="submits"
          v-model="uid"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.emps_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品名称" prop="input">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="input1">
        <el-input v-model="input1" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-button @click="onsubmit" type="primary">添加商品</el-button>
    </el-form>

    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      options: '',
      id: '',
      options1: '',
      uid: '',
      aid: '',
      fid: '',
      input: '',
      input1: '',

      rules: {
        options: [{ required: true, message: '必填', trigger: 'blur' }],
        options1: [{ required: true, message: '必填', trigger: 'blur' }],
        input: [{ required: true, message: '必填', trigger: 'blur' }],
        input1: [{ required: true, message: '必填', trigger: 'blur' }],
      },
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    open1() {
      this.$message.error('错了哦，这是一条错误消息')
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success',
      })
    },
    change(e) {
      // 通过打印查看是否能拿到对应值
      console.log('aid', e)
      this.aid = e
    },
    change1(f) {
      // 通过打印查看是否能拿到对应值
      console.log('fid', f)
      this.fid = f
    },
    submit() {
      this.$http.goodsApi.getSort().then(res => {
        console.log('商品分类', res)
        this.options = res.data.data
        this.uid = ''
        console.log(this.options)
      })
    },

    submits() {
      this.$http.goodsApi.getSortTwo(this.aid).then(res => {
        console.log('商品品牌', res)
        this.options1 = res.data.data
        console.log(this.options1)
      })
    },

    onsubmit() {
      let params = {
        emps_id: this.fid,
        goods_name: this.input,
        goods_price: this.input1,
        goods_ico: this.dialogImageUrl,
      }
      this.$http.goodsApi.addGood(params).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '添加商品成功',
            type: 'success',
          })
          this.id = ''
          this.uid = ''
          this.fid = ''
          this.input = ''
          this.input1 = ''
        } else {
          this.$message.error('添加商品失败')
        }
      })
    },
  },

  mounted() {},
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  height: 120px;
  display: block;
}
</style>
